<template>
  <div class="container">
    <div class="title">
      <span>修改bannerItem</span>
      <span class="back" @click="back">
        <i class="iconfont icon-fanhui"></i> 返回
      </span>
    </div>
    <el-divider></el-divider>
      <el-form label-width="120px">
            <div class="wrap">
              <el-form-item label="">
                  <upload-imgs
                          ref="uploadEle"
                          :value="imgValue"
                          :rules="rules"
                          :multiple="true"
                          :min-num="1"
                          :max-num="1"
                  />
              </el-form-item>
                <el-form-item label="排序" prop="banner_url" >
                    <el-input size="medium" v-model="order_sort" placeholder="请填写排序(值越大越在前)"></el-input>
                </el-form-item>
              <el-form-item label="链接类型">
                <el-radio v-model="type" label="0">无</el-radio>
                <el-radio v-model="type" label="1">图文详情</el-radio>
                <el-radio v-model="type" label="2">官方活动</el-radio>
                <el-radio v-model="type" label="3">商家活动</el-radio>
                <el-radio v-model="type" label="4">个人活动</el-radio>
                <el-radio v-model="type" label="5">上墙</el-radio>
              </el-form-item>
              <el-form-item label="图文详情" v-if="type === '1'">
                <div class="lin-wrap">
                  <tinymce :defaultContent="content" @change="change" />
                </div>
              </el-form-item>
              <el-form-item label="请选择类型ID" v-if="parseInt(type) > 1">
                <div class="lin-wrap">
                  <el-select v-model="type_id" clearable placeholder="请选择">
                    <el-option
                        v-for="item in dataArr"
                        :key="item.id"
                        :label="item.title"
                        :value="item.id">
                    </el-option>
                  </el-select>
                </div>
              </el-form-item>
                <el-form-item class="submit">
                    <el-button type="primary" @click="getValue()">保 存</el-button>
                </el-form-item>
            </div>
      </el-form>
  </div>
</template>

<script>
import banner from '@/models/banner'
import UploadImgs from '@/components/base/upload-imgs'
import Tinymce from '@/components/base/tinymce'
import GfActivity from '@/models/gf-activity'
import SjActivity from '@/models/sj-activity'
import GrActivity from '@/models/gr-activity'

export default {
  components: {
    UploadImgs,
    Tinymce,
  },
  props: {
    editBannerItemID: {
      type: Number,
    },
  },
  watch: {
    type(newVal) {
      if (newVal === '2') {
        this.getGfActivityAll()
      } else if (newVal === '3') {
        this.getSjActivityAll()
      } else if (newVal === '4') {
        this.getGrActivityAll()
        // } else if (newVal === '5') {
      } else {
        this.dataArr = []
      }
    },
  },
  data() {
    return {
      banner_id: 1,
      imgValue: [],
      rules: {
        maxSize: 0.4,
      },
      order_sort: '',
      type: '',
      type_id: '',
      content: '',
    }
  },
  async mounted() {
    const bannerItems = await banner.getBannerItem(this.editBannerItemID)
    this.imgValue = [{
      delete: false,
      id: bannerItems.id,
      imgId: bannerItems.img_id,
      display: bannerItems.img.url,
    }]
    this.order_sort = bannerItems.order_sort
    this.type = bannerItems.type
    this.type_id = bannerItems.type_id
    this.banner_id = bannerItems.banner_id
    this.content = bannerItems.content
  },
  methods: {
    /**
     * 获取全部官方活动
     */
    async getGfActivityAll() {
      const res = await GfActivity.getDataAll()
      this.dataArr = res
    },
    /**
     * 获取全部商家活动
     */
    async getSjActivityAll() {
      const res = await SjActivity.getDataAll()
      this.dataArr = res
    },
    /**
     * 获取全部个人活动
     * */
    async getGrActivityAll() {
      const res = await GrActivity.getDataAll()
      this.dataArr = res
    },
    change(val) {
      this.content = val
    },
    back() {
      this.$emit('editClose')
    },
    async getValue() {
      const self = this
      const imgValue = await this.$refs.uploadEle.getValue()
      const info = {
        items: [{
          id: self.editBannerItemID,
          img_id: imgValue[0].imgId,
          order_sort: self.order_sort,
          type: self.type,
          type_id: self.type_id,
          content: self.content,
        },
        ],
      }
      const res = await banner.editBanner(this.editBannerItemID, info)
      if (res.error_code === 0) {
        this.$message.success(`${res.msg}`)
        this.back()
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.el-divider--horizontal {
  margin: 0
}

.container {
  .title {
    height: 59px;
    line-height: 59px;
    color: $parent-title-color;
    font-size: 16px;
    font-weight: 500;
    text-indent: 40px;

    .back {
      float: right;
      margin-right: 40px;
      cursor: pointer;
    }
  }

  .wrap {
    padding: 20px;
  }

  .submit {
    float: left;
  }
}
</style>
